<template>
    <div class="article-detail">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="item in bannerList">
                <div class="img-box">
                    <img :src="item.imageUrl"/>
                </div>
            </van-swipe-item>
        </van-swipe>

        <div class="footer-bar">
            <van-field class="edit-content" v-model="content" left-icon="edit" placeholder="说点什么呢..." />
            <div class="operate">
                <van-icon name="like-o" />100
                <van-icon name="eye-o" />100
                <van-icon name="chat-o" />100
            </div>
        </div>
    </div>
</template>

<script>
    import { Swipe, SwipeItem, Field, Icon } from 'vant';

    export default {
        name: 'index',
        components: {
            'van-swipe': Swipe,
            'van-swipe-item': SwipeItem,
            'van-field': Field,
            'van-icon': Icon,
        },
        data() {
            return {
                bannerList: [],
                content: ''
            }
        },
        created() {
            this.$API.home.banner.list().then(res => {
                this.bannerList = res.data
            })
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .article-detail {
        width: 100%;
        .my-swipe {
            width: 750px;
            height: 450px;
            .img-box {
                width: 100%;
                height: 100%;
                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }
        .footer-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 110px;
            background: #fff;
            padding: 0 20px;
            box-sizing: border-box;
            @include flexBox(space-between, center);
            .edit-content {
                background: #f8f4f5;
                border-radius: 50px;
                width: 260px;
            }
            .operate {
                font-size: 36px;
            }
        }
    }
</style>
